<template>
  <view class="join container">
    <u--form
      labelPosition="left"
      labelWidth="100px"
      :model="joinInfo"
      :rules="rules"
      ref="joinForm"
    >
      <u-form-item label="联系方式" prop="phone" borderBottom required>
        <u--input v-model="joinInfo.phone" border="none"></u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <u-form-item label="名称" prop="nickname" borderBottom required>
        <u--input v-model="joinInfo.nickname" border="none"></u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
    </u--form>

    <button
      class="circle-button mybtn-active"
      style="width: 90%"
      @click="submitUserForm"
    >
      提交
    </button>
    <u-overlay :show="show" @click="show = false">
      <view class="join-warp">
        <UserModel
          title="提交成功"
          :content="content"
          :width="630"
          :height="536"
        />
      </view>
    </u-overlay>
  </view>
</template>

<script>
import { createModel } from "@/api";
import UserModel from "@/subPages/user/components/UserModel.vue";
export default {
  components: {
    UserModel,
  },
  data() {
    return {
      joinInfo: {
        phone: "",
        nickname: "",
      },
      rules: {
        phone: {
          nickname: {
            type: "string",
            required: true,
            message: "请填写名称",
            trigger: ["blur", "change"],
          },
          phone: {
            type: "string",
            required: true,
            message: "请填写联系方式",
            trigger: ["blur", "change"],
          },
        },
      },
      show: false,
      content: "感谢你对我们的关注与支持，我们会尽快回复您",
    };
  },
  methods: {
    async submitUserForm() {
      const res = await createModel("65c4480c5efd5153ff55f82f", this.joinInfo);
      if (res.code === 200) {
        this.show = true;
      }
    },
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.joinForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.join {
  background-color: #fff;
  position: relative;

  .mybtn-active {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: constant(safe-area-inset-bottom) !important;
    bottom: env(safe-area-inset-bottom) !important;
  }

  &-warp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    // &-model {
    //   width: 630rpx;
    //   height: 536rpx;
    //   margin-bottom: 200rpx;
    //   background: #ffffff;
    //   border-radius: 64rpx;
    //   border: 1px solid #707070;
    //   position: relative;

    //   > image {
    //     width: 312rpx;
    //     height: 266rpx;
    //     position: absolute;
    //     top: -150rpx;
    //     left: 50%;
    //     transform: translateX(-50%);
    //   }
    //   .title {
    //     font-size: 40rpx;
    //     font-weight: bold;
    //     color: #000000;
    //     text-align: center;
    //     margin-top: 100rpx;
    //   }

    //   .content {
    //     margin: 20rpx auto;
    //     width: 480rpx;
    //     font-size: 28rpx;
    //     color: #000000;
    //     text-align: center;
    //     margin-top: 20rpx;
    //     white-space: normal;
    //   }

    //   > button {
    //     position: absolute;
    //     left: 50%;
    //     transform: translateX(-50%);
    //     bottom: 100rpx;
    //   }
    // }
  }
}

::v-deep .u-form {
  background-color: #fff;
  border-radius: 10rpx;

  &-item {
    padding: 0 30rpx;

    &__body {
      padding: 12px 0;
    }

    &__body__left__content__label {
      margin-left: 8rpx;
    }
  }

  input {
    text-align: right !important;
  }

  .u-icon--right {
    // margin-left: 8rpx;
  }
}
</style>
